<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="meng">
      <div class="alert">
        <div>
          <img src="../../../../../static/img/图片 2@1x.png" alt="" />
          <strong>美可玩故事</strong>
          <span>申请使用</span>
        </div>
        <div>
          <span>你的手机号码</span>
          <p></p>
        </div>
        <div>
          <span>
            <input v-model="phoneText" class="phone" ref="phone" type="text" placeholder="输入手机号" />
          </span>
          <span>微信绑定手机号</span>
          <span class="iconfont icon-duigouxuanxiang-01"></span>
          <p></p>
        </div>
        <div>
          <span>使用其他手机号码</span>
        </div>

        <div>
          <button @click="no">拒绝</button>
          <button @click="ok">允许</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      phoneText : ''
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.phone()
  },
  // Vue方法定义
  methods: {
    phone() {
      this.$refs.phone.focus();
      this.$refs.phone.addEventListener('blur',() => {
        let val = this.phoneText;
        let reg = /^1[356789]\d{9}$/;
        let rusult = reg.test(val);
        // console.log(rusult);
        if(!rusult){
          alert('请输入正确的手机号')
        }else{
        localStorage.setItem("phone",reg)
        }
      });
    },
    // ju_hui(){
    //   console.log(222)
    //   this.$emit('fan')
    // },
    // yun_hui(){
    //   console.log(222)
    //   this.$emit('fan')
    // },
    ok() {
      // console.log(1111111);
      localStorage.setItem("username", "11111111");
     if(localStorage.getItem("phone")){
        this.$router.push("/login");
     }
    },
    no() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../../assets/font/iconfont.css");
.meng {
  width: 100vw;
  height: 100vh;
  left: 0px;
  position: absolute;
  top: 0px;
  line-height: 20px;
  /* opacity: 0.5; */
  background: rgba(128, 128, 128, 0.7);
  background: rgba(128, 128, 128, 0.7);
  /* text-align: center; */
}
.meng .alert {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 30;
  width: 414px;
  height: 316px;
  line-height: 20px;
  background: white;
  /* text-align: center; */
}
.meng .alert div:nth-child(1) {
  display: flex;
  margin-top: 27px;
  /* justify-content: center; */
  align-items: center;
}
.meng .alert div:nth-child(1) img {
  margin-right: 14px;
  width: 26px;
  margin-left: 28px;
  height: 26px;
}
.meng .alert div:nth-child(1) strong {
  margin-right: 6px;
}

.meng .alert div:nth-child(2) {
  margin-top: 21px;
}
.meng .alert div:nth-child(2) span {
  margin-left: 27px;
  width: 156px;
  height: 25px;
  display: inline-block;
  color: rgba(16, 16, 16, 100);
  /* font-size: ; */
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  margin-bottom: 16px;
  font-family: PingFangSC-regular;
}
.meng .alert div:nth-child(2) p {
  padding: 0;
  margin: 0;
  margin-left: 27px;
  width: 387px;
  height: 1px;
  border: 1px solid rgba(232, 232, 232, 100);
}
.meng .alert div:nth-child(3) {
  margin-top: 18px;
  margin-left: 27px;
}
.meng .alert div:nth-child(3) span:nth-child(1) {
  display: inline-block;
  width: 139px;
  height: 25px;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-bottom: 16px;
}

.meng .alert div:nth-child(3) span:nth-child(2) {
  width: 117px;
  height: 25px;
  color: rgba(165, 173, 183, 100);
  font-size: 18px;
  margin-right: 87px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-bottom: 16px;
}
.meng .alert div:nth-child(3) span:nth-child(3) {
  /* width: 24px; */
  font-size: 24px 24px;
  display: inline-block;
  /* height: 24px; */
  color: rgba(48, 204, 110, 100);
  margin-bottom: 16px;
}
.meng .alert div:nth-child(3) p {
  padding: 0;
  margin: 0;
  /* margin-left: 27px; */
  width: 387px;
  height: 1px;
  /* background: black; */
  /* border: 1px solid; */
  background: rgba(232, 232, 232, 100);
  border: 1px solid rgba(232, 232, 232, 100);
}
.meng .alert div:nth-child(4) span {
  display: inline-block;
  width: 130px;
  height: 20px;
  margin-top: 16px;
  margin-left: 27px;
  color: rgba(92, 114, 145, 100);
  font-size: 14px;
  /* text-align: left; */
  font-family: PingFangSC-regular;
}
.meng .alert div:nth-child(5) {
  margin-top: 45px;
}
.meng .alert div:nth-child(5) button {
  width: 126px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(232, 232, 232, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  /* text-align: center; */
  font-family: Microsoft Yahei;
  border: none;
}
.meng .alert div:nth-child(5) button:nth-child(1) {
  margin-left: 105px;
}
.meng .alert div:nth-child(5) button:nth-child(2) {
  margin-left: 18px;
  background-color: rgba(48, 204, 110, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
}
/* input */
.phone {
  display: inline-block;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}
</style>